<template>
  <a-modal v-model:open="visible" title="凭证设置" @cancel="onCancel" width="800px" :footer="null">
    <a-form :model="form" layout="horizontal" labelAlign="left" :label-col="{ style: { width: '120px' } }">
      <a-form-item label="生成日期">
        <a-radio-group v-model:value="form.dateType">
          <a-radio value="post">入账日期</a-radio>
          <a-radio value="trade">交易日期</a-radio>
        </a-radio-group>
        <a-date-picker v-model:value="form.date" style="margin-left: 16px; width: 160px;" />
      </a-form-item>
      <a-form-item label="生成规则">
        <a-checkbox-group v-model:value="form.ruleList">
          <a-radio value="one">每条记录对应一张凭证</a-radio>
        </a-checkbox-group>
      </a-form-item>

      <a-form-item label="科目合并">
        <a-checkbox v-model:checked="form.mergeBankSubject">合并银行科目</a-checkbox>
        <a-checkbox v-model:checked="form.mergeOppositeSubject" style="margin-left: 16px;">合并对方科目</a-checkbox>
      </a-form-item>
      <a-form-item label="分录行设置">
        <a-radio-group v-model:value="form.analysisType">
          <a-radio value="none">先借后贷</a-radio>
          <a-radio value="single">一借一贷</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="摘要设置">
        <a-checkbox-group v-model:value="form.summaryFields" style="width:100%">
          <a-checkbox v-for="item in summaryFieldOptions" :key="item.value" :value="item.value">{{ item.label }}</a-checkbox>
        </a-checkbox-group>
        <a-input style="margin-top: 8px;" placeholder="转账/销售收入/支付货款等" />
      </a-form-item>
      <a-form-item label="科目/辅助匹配">
        <a-radio-group v-model:value="form.matchType">
          <a-radio value="name">优先匹配对方户名</a-radio>
          <a-radio value="type">优先匹配收支类型</a-radio>
        </a-radio-group>
        <a-checkbox v-model:checked="form.autoDownload" style="margin-left: 16px;">生成凭证时自动新增下载科目</a-checkbox>
      </a-form-item>

      <a-form-item :wrapper-col="{ span: 24 }" style="text-align:center; margin-top: 16px;">
        <a-button type="primary" style="margin-right: 16px;" @click="onGenerate">生成凭证</a-button>
        <a-button @click="onCancel">取消</a-button>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import { ref, reactive } from 'vue';
const visible = ref(false);
const summaryFieldOptions = [
  { label: '交易日期', value: 'tradeDate' },
  { label: '摘要', value: 'summary' },
  { label: '收支类型', value: 'type' },
  { label: '对方户名', value: 'oppositeName' },
  { label: '备注', value: 'remark' },
];
const form = reactive({
  dateType: 'trade',
  date: '',
  ruleList: [],
  includeSummary: false,
  includeRemark: false,
  mergeBankSubject: false,
  mergeOppositeSubject: false,
  analysisType: 'none',
  summaryFields: [],
  matchType: 'name',
  autoDownload: false,
  settle: false,
  audit: false,
});
function showModal() {
  visible.value = true;
}
function onCancel() {
  visible.value = false;
}
function onGenerate() {
  // TODO: 生成凭证逻辑
  visible.value = false;
}
defineExpose({ showModal });
</script>

<style scoped>
:deep(.ant-modal-content) {
  padding-bottom: 0;
}
</style> 